<!-- 点击后按钮变成加载中状态 -->
<template>
  <el-button
    :size=size
    :type=type
    :disabled=disabled
    :loading=loading
    v-popover:popover
  >
    <el-popover
      @show="handleShow"
      ref="popover"
      placement="top"
      width="160"
      v-model="visible">
      <p>{{ pMsg }}</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="handleClick">确定</el-button>
      </div>
    </el-popover>
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'CPopButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    validate: {
      default: null
    },
    size: String,
    disabled: Boolean,
    pMsg: String
  },
  data () {
    return {
      visible: false,
      loading: false
    }
  },
  methods: {
    handleShow () {
      this.visible = false
      if (this.validate) {
        this.validate((valid) => {
          if (valid) {
            this.visible = true
          }
        })
      } else {
        this.visible = true
      }
    },
    handleClick () {
      this.visible = false
      this.loading = true
      this.$emit('click', this)
    },
    isLoading (loading) {
      this.loading = loading
    }
  }
}
</script>

<style>

</style>
